<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title">当前城市</div>
				<div class="button-list">
					<div class="button-warraper">
						<div class="button">{{this.currentCity}}</div>
					</div>
				</div>
			</div>

			<div class="area">
				<div class="title">热门城市</div>
				<div class="button-list">
					<div class="button-warraper" v-for="item of hot" :key="item.id" @click="handleClickCity(item.name)">
						<div class="button">{{item.name}}</div>
					</div>
				</div>

			</div>

			<div class="area border-bottom" v-for="(item,key) of cities" :key="key" :ref="key">
				<div class="title">{{key}}</div>
				<div class="item-list">
					<div class="item" 
						v-for="innerItem of item" 
						:key="innerItem.id" 
						@click="handleClickCity(innerItem.name)">{{innerItem.name}}</div>
				</div>
			</div>


		</div>
	</div>
</template>

<script>
	import {mapState,mapMutations } from 'vuex'
	import Bscroll from 'better-scroll'
	export default {
		name: 'CityList',
		props: {
			hot: Array,
			cities: Object,
			letter: String
		},
		computed: {
			...mapState({
				currentCity: 'city'
			})
		},
		methods: {
			handleClickCity(city) {
				// this.$store.dispatch('changeCity',city)
				// this.$store.commit('changeCity', city)
				this.changeCity(city)
				this.$router.push('/')
			},
			...mapMutations(['changeCity'])
		},
		mounted() {
			this.scroll = new Bscroll(this.$refs.wrapper);
		},

		watch: {
			letter() {
				if (this.letter) {
					const element = this.$refs[this.letter][0]
					//console.log(element)
					this.scroll.scrollToElement(element)
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.list {
		overflow: hidden;
		position: absolute;
		top: 1.58rem;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.title {
		line-height: .40rem;
		background: #eee;
		padding: .2rem;
		color: #666;
	}

	.button-list {
		overflow: hidden;
		padding: .1rem .6rem .1rem .1rem;
	}

	.button-warraper {
		float: left;
		width: 33.33%;
	}

	.button {
		text-align: center;
		margin: .1rem;
		padding: .1rem 0;
		border: .02rem solid #ccc;
		border-radius: .06rem;
	}

	.item {
		line-height: .66rem;
		padding-left: .2rem;
	}
</style>
